<!-- author: lizq -->
<!-- date: 2023-03-01 15:09:44 -->
<!-- description: table - 详情页 -->
<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="edit-container" :style="{ height: heightAuto ? '100%' : '', padding: isPadding ? '0' : '20px 20px 0' }">
    <div class="panel">
      <div v-for="(items, index) in formDataInfo" :key="index">
        <!-- 标题 -->
        <div v-if="items.title" class="title">{{ items.title }}</div>
        <!-- 表单 -->
        <div class="content">
          <el-form :model="formData" label-width="120px" class="demo-ruleForm" status-icon>
            <el-row>
              <el-col v-for="(item, i) in items.options" :key="i" :span="spanNum(i, item.span, items.options)">
                <el-form-item
                  :label="item.label"
                  :label-width="item.labelWidth || ''"
                  :class="{ 'form-content-nopadding': item.type == 'table' || item.type == 'slot', 'other-label': item.otherLabel }"
                >
                  <!-- 字典 -->
                  <G-dict-tag v-if="item.type == 'dict'" :options="$dict[item.dict]" :value="formData[item.prop]" />
                  <!-- 图片 -->
                  <div v-else-if="item.type == 'img' && formData[item.prop]" class="detail-img">
                    <el-button link type="primary" @click="handlePictureCardPreview(formData[item.prop])">查看图片</el-button>
                  </div>
                  <!-- 文件 -->
                  <div v-else-if="item.type == 'fileList'" class="fileList">
                    <el-button v-for="(file, fi) in formData[item.prop]" :key="fi" link type="primary" @click="toFile(file)">{{ file.fileName }}</el-button>
                  </div>
                  <div v-else-if="item.type == 'html'" class="htmlStyle" v-html="toBreak(formData[item.prop])"></div>
                  <!-- 表格 -->
                  <el-table
                    v-else-if="item.type == 'table'"
                    :id="item.tableInfo.tableId"
                    :border="item.tableInfo.border"
                    :data="formData[item.prop]"
                    :show-summary="item.tableInfo.showSummary"
                    style="width: 100%"
                    :summary-method="item.tableInfo.getSummaries || getSummaries"
                    :stripe="item.tableInfo.stripe"
                  >
                    <!-- 序号 -->
                    <el-table-column type="index" label="序号" width="80" align="center">
                      <template #default="{ $index }">
                        {{ $index + 1 }}
                      </template>
                    </el-table-column>
                    <!-- 列-内容 -->
                    <tableColumnItem v-for="(headerItem, itemIndex) in item.tableHeader" :key="itemIndex" :col="headerItem" :custom-column="false">
                      <template v-for="slot in Object.keys(customSlots)" #[slot]="scope">
                        <!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
                        <slot :name="slot" v-bind="scope" />
                      </template>
                    </tableColumnItem>
                  </el-table>

                  <!-- <G-table
                      v-else-if="item.type == 'table'"
                      ref="refGtable"
                      :loading="false"
                      :table-data="formData[item.prop]"
                      :table-header="item.tableHeader"
                      :table-info="tableInfo"
                      lazy
                    >
                    </G-table> -->
                  <!-- 插槽 -->
                  <slot v-else-if="item.type == 'slot'" :name="item.prop"></slot>
                  <!-- 默认数据 -->
                  <div v-else class="abc">{{ formData[item.prop] }}</div>
                  <!-- <div v-else>{{ formData[item.prop] }}{{ i }}</div> -->
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <!-- 插槽 -->
      <slot></slot>
    </div>
    <!-- 底部按钮 -->
    <div v-if="showFooter" class="footer">
      <slot name="footer"> <el-button type="primary" @click="goBack">返回</el-button> </slot>
    </div>
    <!-- 图片预览 -->
    <el-dialog v-model="dialogVisible" title="预览">
      <img w-full :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script setup>
const $props = defineProps({
  formData: {
    type: Object,
    default: () => {}
  },
  formDataInfo: {
    type: Array,
    default: () => []
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  heightAuto: {
    type: Boolean,
    default: false
  },
  isPadding: {
    type: Boolean,
    default: false
  }
});
const $emit = defineEmits(["callBackData"]);

const state = reactive({
  dialogVisible: false,
  dialogImageUrl: ""
});
const { dialogVisible, dialogImageUrl } = toRefs(state);
// 表格列插槽
const { proxy } = getCurrentInstance();
const customSlots = reactive({
  ...proxy.$slots
});

//初始化-字典数据

const $dict = ref([]);

onMounted(() => {
  $props.formDataInfo.map((ele) => {
    if (ele.options) {
      handleDict(ele.options);
    }
  });
});

//处理字典
const handleDict = (arr) => {
  if (arr && arr.length) {
    let dictList = [];
    arr.forEach((item) => {
      if (item.dict) {
        dictList.push(item.dict);
      }
    });
    if (dictList.length) {
      console.log(1111, dictList);
      // $dict.value.push(getDict(dictList));
      $dict.value = proxy.useDict(dictList);
      console.log(123321, $dict.value);
    }
  }
};

//计算span值
const spanNum = computed(() => (index, span, arr) => {
  if (span) {
    return span;
  } else {
    return index == arr.length - 1 && arr.length % 2 == 1 ? 24 : 12;
  }
});

const goBack = () => {
  $emit("callBackData");
};

// 图片预览
const handlePictureCardPreview = (url) => {
  state.dialogImageUrl = url;
  state.dialogVisible = true;
};

const toFile = (file) => {
  window.open(file.fileUrl, "_blank");
};

// 处理html 格式换行
function toBreak(val) {
  if (val) return val.split("\n").join("<br/>");
}

//表格-表尾合计行
const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "合计";
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (!values.every((value) => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0);
      sums[index] += " ";
    } else {
      sums[index] = "";
    }
  });
  return sums;
};
</script>

<style scoped lang="scss">
.panel {
  height: calc(100% - 40px);
  padding-bottom: 80px;
  overflow-y: auto;
}

.content {
  height: auto;
  padding-bottom: 0;
}

.detail-img {
  img {
    max-width: 100%;
    height: auto;
  }
}

.htmlStyle {
  overflow-wrap: break-word;
  width: 100%;
  height: auto;
  min-height: 40px;
  line-height: 2;
  display: flex;
  align-items: center;
}

.fileList {
  .file-item {
    cursor: pointer;
    margin-bottom: 10px;
    text-decoration: underline;
    line-height: 20px;

    &:nth-last-child(1) {
      margin-bottom: 0;
    }

    &:hover {
      color: #999;
    }
  }
}

:deep(.el-cascader) {
  width: 100%;
}

:deep(.el-form-item) {
  height: 100%;
  margin-bottom: 0 !important;
}

:deep(.el-row) {
  border: 1px #e3e5ef solid;
  margin-bottom: $G-height10 * 2;
}

:deep(.el-form-item__label) {
  height: auto !important;
  min-height: 32px !important;
  line-height: 40px;
  background-color: #f4f7fe;
  border: 1px #e3e5ef solid;
  justify-content: center;
  align-items: center;
  padding: 0;
}

:deep(.el-form-item__content) {
  width: 100%;
  height: auto;
  min-height: 40px;
  line-height: 20px;
  border: 1px #e3e5ef solid;
  box-sizing: border-box;
  padding: 10px;

  .abc {
    width: 100%;
  }
}

.el-button.el-button--primary.is-link {
  text-decoration: underline;
}

.form-content-nopadding {
  :deep(.el-form-item__content) {
    padding: 0;
  }

  :deep(.el-table) {
    .el-table__header-wrapper {
      th {
        background-color: #f4f7fe !important;
      }
    }
  }
}
.other-label {
  :deep(.el-form-item__label) {
    background-color: #fff;
  }
}
</style>
